<template>
  <div class="register">
    <header class="header">
      <div class="wrapper">
        <a class="site-logo">猫眼电影</a>
      </div>
    </header>
    <div class="content">
      <el-form>
        <el-input placeholder="用户名" v-model="username"></el-input>

        <el-input placeholder="电话" v-model="telephone"></el-input>

        <el-input placeholder="邮箱" v-model="email"></el-input>

        <el-input placeholder="密码" type="password" v-model="password"></el-input>

        <el-input placeholder="确认密码" v-model="pass"></el-input>

        <el-button class="register_button" type="primary" @click="submitForm('register')">完成注册并登录</el-button>
      </el-form>
    </div>
    <footer class="footer">
      <div class="copyright">
        <p>美团网团购,京东公安备案</p>
      </div>
    </footer>
  </div>
</template>

<script>
export default {
  name: "register",
  data() {
    return {
      username: "",
      password: "",
      telephone: "",
      email: "",
      pass: ""
    };
  },
  methods: {
    submitForm() {
      const passwordReg = /^[0-9]+$/;
      const emailReg = /^(([a-zA-Z0-9_\-\.]+)@([a-zA-Z0-9_\-\.]+)\.([a-zA-Z]{2,5}){1,25})$/;
      const telephoneReg = /^[1][3,4,5,7,8][0-9]{9}$/;
      const usernameReg = /^[^\s]*$/;
      if (
        this.username === "" ||
        this.password === "" ||
        this.telephone === "" ||
        this.email === "" ||
        this.pass === ""
      ) {
        return alert("账号，密码，确认密码，电话，邮箱不能为空");
      } else if (usernameReg.test(this.username)) {
        return alert("不能有空格");
      } else if (!telephoneReg.test(this.telephone)) {
        return alert("电话格式不正确");
      } else if (!emailReg.test(this.email)) {
        return alert("邮箱格式不正确");
      } else if (passwordReg.test(this.password)) {
        return alert("密码不能全为数字");
      } else if (this.password !== this.pass) {
         
        return alert("密码不一致");
      } else {
        // 请求
        // async getlogin(
        //   const {data:res} = await getlogin()
        //   if
        // )
        
        return alert("注册成功");
      }
    }
  }
};
</script>
<style scoped>
.header {
  min-width: 100%;
  border-bottom-color: #e02025;
  border-bottom: 2px solid #e02025;
  color: #666;
}
.wrapper {
  width: 90%;
  margin: 0 auto;
  padding: 10px 0;
}
.site-logo {
  color: #ec454a;
  font-size: 20px;
  font-weight: 700;
  padding-left: 13%;
}
.content {
  width: 100%;
  margin: 0 auto 30px;
  padding-top: 30px;
  min-height: 300px;
}

.el-input {
  width: 280px;
  display: flex;
  margin-left: 15%;
  margin-top: 20px;
}
.register_button {
  width: 280px;
  background-color: #ec454a;
  border: 0;
  margin-left: 15%;
  margin-top: 30px;
}
.footer {
  margin: 0 auto 30px;
  clear: both;
  width: 980px;
  font-size: 10px;
  color: #999;
}
.copyright {
  text-align: center;
  color: #ccc;
  clear: both;
  font-size: 12px;
  font-family: initial;
}
.copyright p {
  padding-top: 70px;
}
</style>
